<template>
  <el-dialog :title="match.title" :visible.sync="match.open" width="55%" append-to-body :before-close="closeDelDialog">
    <table class="tableBox" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3" align="center">
          <el-button type="success" plain icon="el-icon-refresh"  @click="automatic">自动对应</el-button>
          <el-button type="warning" plain icon="el-icon-connection"  @click="handMovement">手动对应</el-button>
          <el-button type="primary" plain  @click="submitMatch">确认</el-button>
          <el-button type="info" plain  @click="closeDelDialog">取消</el-button>
        </td>
      </tr>
      <tr style="margin-top: 20px;display: flex;">
        <td class="lmrTable" align="right">
          <span class="tableTitle">导入数据字段</span>
          <div class="dataBox">
            <table id="leftTable">
              <tr v-for="option in leftData" :key="option.xlsNum">
                <td style="height: 30px;">
                  <el-radio v-model="left" :label="option">{{ option.xlsName }}</el-radio>
                </td>
              </tr>
            </table>
          </div>
        </td>
        <td class="lmrTable" align="center">
          <el-form method="post">
            <span class="tableTitle">已对应数据字段</span>
            <div class="dataBox">
              <table id="divTags" style="display: inline-block;">
                <tr v-for="option in matchedData" :key="option.xlsNum">
                  <td style="height: 30px;" @click="removeMatch(option)">
                    {{ option.xlsName }} - {{ option.caption }}
                  </td>
                </tr>
              </table>
            </div>
          </el-form>
        </td>
        <td class="lmrTable" align="left">
          <span  class="tableTitle">系统字段(<font style="color: rgba(255,0,0,1); font-size: 16px; vertical-align: top;">*</font>项为必选项)</span>
          <div class="dataBox">
            <table id="rightTable">
              <tr v-for="(option, index) in rightData" :key="option.name">
                <td style="height: 30px;">
                  <span v-show="option.isNoEmpty === 1" style="color: rgba(255,0,0,1);font-size: 16px;vertical-align: top;">*</span>
                  <el-radio v-model="right" :label="option" :class="radioClass[index]">{{ option.caption }}</el-radio>
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
export default {
  name: "importMatch",
  props: ["match"],
  data() {
    return {
      leftData: [],
      left: "",
      matchedData: [],
      right: "",
      rightData: []
    }
  },
  computed: {
    radioClass() {
      return this.rightData.map(option => option.isNoEmpty === 1 ? 'radio-with-star' : 'radio-without-star');
    }
  },
  methods: {
    init(xlsTitle,sysTitle) {
      console.log(xlsTitle,sysTitle)
      this.leftData = xlsTitle
      this.rightData = sysTitle
    },
    // 自动对应
    automatic() {
      console.log(this.leftData, this.rightData)
      // 获取对应数据字段
      for (let i = 0; i < this.leftData.length; i++) {
        for (let j = 0; j < this.rightData.length; j++) {
          if (this.leftData[i].xlsName === this.rightData[j].caption) {
            this.matchedData.push({
              xlsNum: this.leftData[i].xlsNum,
              xlsName: this.leftData[i].xlsName,
              name: this.rightData[j].name,
              caption: this.rightData[j].caption,
              showType: this.rightData[j].showType,
              dataLength: this.rightData[j].dataLength,
              isNoEmpty: this.rightData[j].isNoEmpty,
              defaultValue: this.rightData[j].defaultValue,
              checkChongfu: this.rightData[j].checkChongfu
            })
          }
        }
      }
      this.remove()
    },
    // 手动对应
    handMovement() {
      if(this.left.length == 0 || this.right.length == 0) {
        this.$message.warning('两边必须都选择！')
        return
      }
      // 将获取到左右数据渲染到已对应数据字段
      this.matchedData.push({
        xlsNum: this.left.xlsNum,
        xlsName: this.left.xlsName,
        name: this.right.name,
        caption: this.right.caption,
        showType: this.right.showType,
        dataLength: this.right.dataLength,
        isNoEmpty: this.right.isNoEmpty,
        defaultValue: this.right.defaultValue,
        checkChongfu: this.right.checkChongfu
      })
      this.left = []
      this.right = []
      this.remove()
    },
    remove() {
      // 将匹配上的导入数据字段从左边去掉
      for (let i = 0; i < this.leftData.length; i++) {
        for (let j = 0; j < this.matchedData.length; j++) {
          const data = this.leftData.filter((item) => item.xlsName === this.matchedData[j].xlsName)
          if (data.length > 0) {
            const index = this.leftData.indexOf(data[0]);
            if (index > -1) {
              this.leftData.splice(index, 1);  // 从this.leftData中移除匹配的项
            }
          }
        }
      }
      // 将匹配上的系统字段从右边去掉
      for (let i = 0; i < this.rightData.length; i++) {
        for (let j = 0; j < this.matchedData.length; j++) {
          const data = this.rightData.filter((item) => item.name === this.matchedData[j].name)
          if (data.length > 0) {
            const index = this.rightData.indexOf(data[0]);
            if (index > -1) {
              this.rightData.splice(index, 1);  // 从this.rightData中移除匹配的项
            }
          }
        }
      }
    },
    // 点击已对应数据字段去除匹配
    removeMatch(option) {
      // 左边右边回显数据
      this.leftData = this.leftData.concat({
        xlsNum: option.xlsNum,
        xlsName: option.xlsName,
      })
      this.rightData = this.rightData.concat({
        name: option.name,
        caption: option.caption,
        showType: option.showType,
        dataLength: option.dataLength,
        isNoEmpty: option.isNoEmpty,
        defaultValue: option.defaultValue,
        checkChongfu: option.checkChongfu
      })
      // 中间把数据去掉
      const data = this.matchedData.filter((item) => item.name === option.name)
      if (data.length > 0) {
        const index = this.matchedData.indexOf(data[0]);
        if (index > -1) {
          this.matchedData.splice(index, 1);  // 从this.rightData中移除匹配的项
        }
      }
    },
    submitMatch() {
      const data = this.rightData.filter((item) => item.isNoEmpty === 1)
      if(data.length > 0) {
        this.$message({ message: '有必填项未导入', type: 'warning' })
        return false
      }
      this.left = ""
      this.right = ""
      this.$emit("submitMatch",this.matchedData)
      this.matchedData = []
      this.leftData = []
      this.rightData = []
    },
    closeDelDialog() {
      var that = this;
      that.$emit("matchCancel")
      this.matchedData = []
      this.left = ""
      this.right = ""
      this.leftData = []
      this.rightData = []
    },
  }
}
</script>

<style lang="scss" scoped>
table {
  width: 100%;
}

.dataBox {
  height: 500px;
  width: calc(100% - 20px);
  overflow: auto;
  padding: 0 10px;
}

.tableTitle {
  display: block;
  width: 100%;
  text-align: center;
  //background-color: #eaf0ff;
  border-bottom: 1px #d5e1ed solid;
  height: 35px;
  line-height: 35px;
  border-radius: 5px 5px 0 0;
}

.lmrTable {
  box-shadow: 9px 3px 10px #eee;
  width: 30%;
  border: 1px #d5e1ed solid;
  border-radius: 5px;
  display: inline-block;
  margin: 0 15px;
}

.lmrTable table tr:HOVER {
  background-color: #e7f4f9 !important;
}

.tableBox {
  width:90%;
  height:100%;
  margin:auto;
  padding:0;
  padding-bottom: 20px;
  border-spacing: 10px;
  text-align:center;
}

.radio-with-star {
  margin-left: 9px;   /* 带*的<el-radio>的左边距 */
}

.radio-without-star {
  margin-left: 15px;  /* 不带*的<el-radio>的左边距 */
}

 ::v-deep .el-dialog {
   display: flex;
   flex-direction: column;
   margin: 0 !important;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: calc(100% - 30px);
   max-width: calc(100% - 30px);
 }

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

</style>
